<template>
  <el-table class="table" :data="state.tableData" style="width: 100%">
    <el-table-column align="center" prop="id" label="id" />
    <el-table-column align="center" prop="username" label="用户名" />
    <el-table-column align="center" prop="create_datetime" label="创建时间" />
    <el-table-column align="center" fixed="right" label="操作">
      <template #default="scope">
        <el-button
          link
          type="primary"
          size="small"
          @click="handleModify(scope.row)"
          >修改</el-button
        >
        <el-button
          link
          type="primary"
          size="small"
          @click="handleDel(scope.row.id)"
          >删除</el-button
        >
      </template>
    </el-table-column>
  </el-table>
  <el-dialog
    v-model="dialogVisible"
    title="修改"
    width="30%"
    :before-close="handleClose"
  >
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item label="用户名">
        <el-input v-model="state.formInline.username" placeholder="用户名" />
      </el-form-item>
      <el-form-item label="密码">
        <el-input v-model="state.formInline.password" placeholder="密码" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">Cancel</el-button>
        <el-button type="primary" @click="modify"> Confirm </el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script setup>
// import tools from '@/utils/tools.js'
import { ref, computed, reactive, getCurrentInstance, onMounted } from "vue";
import { getAllUer, modifyUser, deleteUser } from "@/api";
import { ElMessage } from "element-plus";
const dialogVisible = ref(false);
const state = reactive({
  tableData: [],
  formInline: {
    username: "",
    password: "",
    create_datetime: "",
  },
});
onMounted(() => {
  getUser();
});
const modify = (row) => {
  modifyUser(state.formInline).then((res) => {
    if (res && res.data.code == "200") {
      ElMessage({
        message: "修改成功",
        type: "success",
      });
      dialogVisible.value = false;
      getUser();
    } else {
      ElMessage.error("Oops, this is a error message.");
    }
    console.log(res, "修复给");
  });
};
const getUser = () => {
  getAllUer().then((res) => {
    if (res.status == "200" && res.data) {
      state.tableData = res.data.data;
    }
    console.log(res, "所有用户");
  });
};
const handleModify = (row) => {
  state.formInline.username = row.username;
  state.formInline.password = "";
  //   state.formInline.create_datetime = new Date().toLocaleString()
  state.formInline.create_datetime = "2023-03-11T09:13:20.261Z";
  state.formInline.id = row.id;
  dialogVisible.value = true;
};
const handleDel = (id) => {
  deleteUser(id).then((res) => {
    if (res.status == "200" && res.data) {
      ElMessage({
        message: "删除成功",
        type: "success",
      });
    }
    console.log(res, "所有用户");
    getUser();
  });
};
</script>
<style lang='scss' scoped>
.table {
  margin-top: 10px;
}
</style>
